<template>
    <div class="loadLog">
        <div class="search">
            <el-form :inline="true" :model="logForm" class="demo-form-inline">
                <el-form-item label="导入时间">
                    <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" size='mini'>
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" size="mini">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="logData" border style="width: 100%"
            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400,padding:'5px 0'}" v-loading="loading"
            element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading">
            <el-table-column prop="createTime" label="导入时间" width="150px">
            </el-table-column>
            <el-table-column prop="account" label="导入用户" width="120px">
            </el-table-column>
            <el-table-column prop="count" label="导入结果" width="120px">
                <template slot-scope="scope">
                    <span :class="computedClass(scope.row.data,'class')" class="circle"></span>
                    导入{{computedClass(scope.row.data,'state')}}
                </template>
            </el-table-column>
            <el-table-column prop="drxq" label="导入详情">
                <template slot-scope="scope">
                    {{`工单创建成功数量为${scope.row.data.createSuccess}个，
                        创建失败数量为${scope.row.data.createFail}个，
                        更新成功数量为${scope.row.data.updateSuccess}个，
                        更新失败数量为${scope.row.data.updateFail}个。`}}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="watch(scope.$index)">查看
                    </el-button>
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty :image-size='100'></el-empty>
            </div>
        </el-table>
        <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]" :page-size="logForm.limit" layout="total, prev, pager, next, sizes"
            :total="total" background>
        </el-pagination>
    </div>
</template>

<script>
    import {
        importLog
    } from '@/api/baseController'
    export default {
        data() {
            return {
                logForm: {
                    startTime: '',
                    endTime: '',
                    page: 1,
                    limit: 10,
                    type: 'workOrder'
                },
                loading: false,
                value: [],
                logData: [],
                total: 0,
                state: ''
            }
        },
        computed: {
            computedClass() {
                return (data, payload) => {
                    let state
                    let style
                    const {
                        createFail,
                        createSuccess,
                        updateSuccess,
                        updateFail
                    } = data
                    //创建失败 || 更新失败有一个失败为失败  && 创建成功&&更新成功都为0
                    if ((createFail || updateFail) && (!createSuccess && !updateSuccess)) { 
                        style = 'fail'
                        state = '失败'
                    } else if (!createFail && !createSuccess && !updateSuccess && !updateFail) { //全部为0
                        style = 'success'
                        state = '成功'
                    }else if ((createSuccess || updateSuccess) && (!createFail && !updateFail)) {
                        //创建成功 || 更新成功有一个成功为成功  && 创建失败&&更新失败都为0
                        style = 'success'
                        state = '成功'
                    } else {
                        style = 'part'
                        state = '部分成功'
                    }
                    return payload == 'class' ? style : state
                }
            }
        },
        mounted() {
            this.getImportLog(this.logForm)
        },
        methods: {
            //导入日志
            getImportLog(data) {
                this.loading = true
                importLog(data).then(res => {
                    if (res.code == 200) {
                        if (res.data == null) {
                            this.logData = []
                        } else {
                            this.logData = res.data.list
                            this.total = res.data.total
                        }
                    }
                    this.loading = false
                })
            },
            //查询
            search() {
                if (this.value == null) {
                    this.logForm.startTime = ''
                    this.logForm.endTime = ''
                } else {
                    this.logForm.startTime = this.utils.formatTime(this.value[0], 'yyyy-MM-dd 00:00:00')
                    this.logForm.endTime = this.utils.formatTime(this.value[1], 'yyyy-MM-dd 23:59:59')
                }
                this.getImportLog(this.logForm)
            },
            //查看
            watch(index){
                this.$router.push({
                    path:'/productionManagement/workOrder/logDetails',
                    query:{
                        index,
                        page:this.logForm.page,
                        limit:this.logForm.limit
                    }
                })
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.logForm.limit = val
                this.getImportLog(this.logForm)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.logForm.page = val
                this.getImportLog(this.logForm)
            },
        }
    }
</script>

<style lang="less" scoped>
    .loadLog {
        padding: 0 20px;

        .search {
            padding: 20px 30px;

            /deep/ .el-form-item {
                margin-bottom: 0;
            }
        }

        .circle {
            display: inline-block;
            margin-right: 10px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .success {
            background: #02b980;
        }

        .fail {
            background: rgb(255, 59, 48);
        }

        .part {
            background: rgb(250, 173, 20);
        }
    }
</style>